<template>
	<view style="background-color: #f7f7f7;">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff;">经营统计</view>
			<view class="card">
				<view class="date-selector">
				  <view class="select-item" :class="{active: currentDate === '今日'}">今日</view>
				  <view class="select-item" :class="{active: currentDate === '昨日'}">昨日</view>
				  <view class="select-item" :class="{active: currentDate === '自定义'}">自定义</view>
				</view>
				<view class="line"></view>
				<!-- 收入和订单量统计 -->
				<view class="statistics">
				  <view class="stat-item">
					<image src="/static/income.png" style="width: 35rpx; height: 30rpx; background-color: #ff521b; padding: 10rpx;"></image>
					<view class="amount">￥2066.56</view>
					<view class="label">收入</view>
				  </view>
				  <view class="stat-item">
					<image src="/static/num.png"  style="width: 35rpx; height: 30rpx; background-color: #378ffd; padding: 10rpx;"></image>
					<view class="amount">53</view>
					<view class="label">订单量</view>
				  </view>
				</view>
			</view>


			<view class="card">
				<view class="income-chart">
				  <text class="chart-title">收入分布</text>
				  <view class="line2"></view>
				  <canvas canvas-id="incomePieChart" id="incomePieChart" class="chart-canvas" style="width: 500rpx; height: 500rpx;"></canvas>
				</view>
			</view>

			<view class="card">
				<view class="order-chart">
				  <text class="chart-title">订单分布</text>
				  <view class="line2"></view>
				  <canvas canvas-id="orderBarChart" id="orderBarChart" class="chart-canvas" style="width: 500rpx; height: 500rpx;"></canvas>
				</view>
			</view>
		</view>
		<view style="height: 1000rpx;"></view>
	</view>
		
</template>

<script>
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
var uChartsInstance = {};
// import { uChartsFun } from '@/utils/u-charts-utils.js';

//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
import demodata from '@/mockdata/demodata.json';

export default {
  data() {
    return {
      currentDate: '今日',
      incomePieChart: {},
      orderBarChart: {}
    };
  },
onLoad() {
	  	//#ifdef MP-ALIPAY || MP-WEIXIN
	  	this.pixelRatio=uni.getSystemInfoSync().pixelRatio;
	  	//#endif
	  	this.cWidth=uni.upx2px(600);
	  	this.cHeight=uni.upx2px(400);
	  	this.getServerData();
	  },
	  onReady() {
	    this.getServerData()
	  },
  methods: {
	  
	  backPage() {
		uni.navigateBack();
	  },
    //模拟从服务器获取数据
        getServerData() {
          setTimeout(() => {
            // 需要自行拼接chartsData
            let chartsData=JSON.parse(JSON.stringify(demodata.Pie))
            let type2dData=JSON.parse(JSON.stringify(demodata.Column))
            this.drawCharts("incomePieChart",chartsData);
            this.draw2dCharts("orderBarChart",type2dData);
          }, 500);
        },
		// #ifdef H5 
        drawCharts(id,data){
            const ctx = uni.createCanvasContext(id, this);
            uChartsInstance[id]=new uCharts({
                context: ctx, // v2.0版本必须要传context
                type: 'pie', // 修改为饼图类型
                fontSize: 15,
                padding: [15, 35, 0, 0],
                dataLabel: true,
                dataPointShape: true,
                series: data.series, // 饼图只需series数据
                animation: true,
                width: this.cWidth,
                height: this.cHeight,
                extra: {
                    pie: {
                        offsetAngle: 0,
                        labelWidth: 10,
                        legendHover: true,
                        itemStyle: 'arc'
						// 使用 formatter 函数自定义数据标签显示
                    }
                }
            });
        },
		// #endif 
		// #ifdef MP-WEIXIN
		drawCharts(id,data){
		    const ctx = uni.createCanvasContext(id, this);
		    uChartsInstance[id]=new uCharts({
		        context: ctx, // v2.0版本必须要传context
		        type: 'pie', // 修改为饼图类型
		        fontSize: 10,
		        padding: [15, 35, 0, 0],
		        dataLabel: true,
		        dataPointShape: true,
		        series: data.series, // 饼图只需series数据
		        animation: true,
		        width: this.cWidth,
		        height: this.cHeight,
		        extra: {
		            pie: {
		                offsetAngle: 0,
		                labelWidth: 10,
		                legendHover: true,
		                itemStyle: 'arc'
						// 使用 formatter 函数自定义数据标签显示
		            }
		        }
		    });
		},
		// #endif
		// #ifdef H5 
        draw2dCharts(id,data) {
            const ctx = uni.createCanvasContext(id, this);
            uChartsInstance[id] = new uCharts({
                context: ctx,
                type: 'column',
                fontSize: 10,
                padding: [20, 50, 20, 25],
                dataLabel: true,
                dataPointShape: true,
                categories: data.categories,
                series: data.series,
                animation: true,
                width: 350,
                height: 300,
				xAxis: {
				  disableGrid:true,
				},
				yAxis: {
				  data:[{
					min:0,
				    axisLine:false,
				    //注意，v2.0版本的format变成了formatter
				    // formatter:(val)=>{return val.toFixed(0)+'元'},
				  }]
				},
                extra: {
                    column: {
                        type: 'group',
                        width: 30,
                    }
                }
            });
        },
		// #endif
		
		// #ifdef MP-WEIXIN
		draw2dCharts(id,data) {
		    const ctx = uni.createCanvasContext(id, this);
		    uChartsInstance[id] = new uCharts({
		        context: ctx,
		        type: 'column',
		        fontSize: 10,
		        padding: [20, 100, 20, 25],
		        dataLabel: true,
		        dataPointShape: true,
		        categories: data.categories,
		        series: data.series,
		        animation: true,
		        width: 350,
		        height: 300,
				xAxis: {
				  disableGrid:true,
				},
				yAxis: {
				  data:[{
					min:0,
				    axisLine:false,
				    //注意，v2.0版本的format变成了formatter
				    // formatter:(val)=>{return val.toFixed(0)+'元'},
				  }]
				},
		        extra: {
		            column: {
		                type: 'group',
		                width: 30,
		            }
		        }
		    });
		},
		// #endif
        tap(e,id){
          uChartsInstance[id].showToolTip(e)
        }
      }
    }
</script>

<style>
@import "@/common/app.css";
.card{border-radius: 20px; background-color: #fff; margin: 30rpx; padding: 30rpx 20rpx;}
.line{ width: 100%; height: 1px; background-color: gray; margin: 20rpx 10rpx; }	
.line2{ width: 100%; height: 2px; background-color: gray; margin: 20rpx 10rpx; }
.date-selector {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.date-selector .select-item {
  padding: 10rpx 20rpx;
  border-radius: 5rpx;
  cursor: pointer;
}

.date-selector .select-item.active {
  background-color: #2c82ff;
  color: white;
}
.statistics {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
}
.stat-item {
    text-align: center;
	margin: 40rpx 0;
  }
.amount {
     font-size: 32rpx;
     margin-bottom: 10rpx;
}
.label {
     font-size: 24rpx;
}
.chart-title {
    font-size: 28rpx;
}
.chart-canvas {
  width: 100%;
  height: 200rpx;
}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	  
</style>